<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html,body{
            height:100%;
        }
        h1,h2{
            text-align: center;
        }
        #map{
            zoom: 2;
            border:5px solid gold;
            margin:0 auto;
            background-color: #E2E2E2;
        }
        .row{
            height:20px;
        }
        .cell{
            width:20px;
            height:20px;
            /*border:1px solid black;*/
            float: left;
            box-sizing: border-box;
        }
        .snake{
            background-color: #9acfea;
        }
        #start{
            width:90px;
            height:40px;
            background-color: gold;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            position: absolute;
            cursor: pointer;
            left: 0;
            right:0;
            bottom: 0;
            top:0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="start">开始</div>
    <h1>贪吃蛇</h1>
    <h2 id="score">0</h2>
    <div id="map"></div>
</body>
<script type="text/javascript" src="../js/touch.js"></script>
<script>
    !function () {
        var score = document.getElementById("score");
        var mapDiv = document.getElementById("map");
        var start = document.getElementById("start");

        //地图的二维数组
        var mapArr = [];
        //贪吃蛇的身体数组
        var snake = [];
        //动态生成小格子
        //行和列
        var rowNum = 15;
        var colNum = 15;

        //蛇的速度
        var speed = 300;

        //蛇的前进方向
        var direction = "r";

        //蛇头的位置
        var x = 2,y = 0;

        //食物的位置
        var foodX , foodY;

        //不能快速改变方向的布尔值
        var flag = true;

        //游戏的时间
        var timeout;


        //设置地图宽高
        mapDiv.style.width = 20 * rowNum + "px";
        mapDiv.style.height = 20 * colNum + "px";
        
        //创建地图
        for (var i = 0;i < rowNum;i++){
            //行
            var rowDiv = document.createElement('div');
            rowDiv.className = "row";
            mapDiv.appendChild(rowDiv);
            //创建数组装下面for循环出来的15个小块
            var rowArr = [];
            for (var j = 0;j < colNum;j++){
                //列
                var cellDiv = document.createElement('div');
                cellDiv.className = "cell";
                cellDiv.style.display = "inline-block";
                rowDiv.appendChild(cellDiv);
                rowArr.push(cellDiv);
            }
            mapArr.push(rowArr);
        }


        //创建蛇
        for (var i = 0;i < 3;i++){
            snake[i] = mapArr[0][i];
            snake[i].className = "snake cell";
        }

        //创建随机食物
        randomFood();
        
        
        function randomFood() {
            //随机位置
            foodX = Math.floor(Math.random() * rowNum);
            foodY = Math.floor(Math.random() * colNum);

            //检查该坐标的cell是否是蛇的身体
            if (mapArr[foodY][foodX].className == "snake cell"){
                //重新随机
                randomFood();
            }else {
                //将该随机块 的颜色改变
                mapArr[foodY][foodX].className = "snake cell";
            }
        }


        start.onclick = function () {
            start.onclick = null;
            start.style.display = "none";
            //让蛇动起来
            var time = setInterval(move,speed);

            //蛇的移动函数
            function move() {
                clearTimeout(timeout);
                flag = true;
                switch (direction){
                    case "r":
                        x++;
                        break;
                    case "l":
                        x--;
                        break;
                    case "u":
                        y--;
                        break;
                    case "d":
                        y++;
                        break;
                    default:
                        break;
                }

                //判断蛇有没有碰到墙壁
                if (x < 0 || x > colNum -1 || y < 0 || y > rowNum -1){
                    clearInterval(time);
                    return alert("不撞南墙不回头！！");
                }
                //判断蛇是否碰到自己
                for  (var k = 0;k < snake.length;k++){
                    if (snake[k] == mapArr[y][x]){
                        clearInterval(time);
                        return alert("厉害了我的哥 自己都吃啊！");
                    }
                }

                //判断蛇是否碰到食物
                if (x == foodX && y == foodY){
                    score.innerHTML++;
                    snake.push(mapArr[foodY][foodX]);
                    randomFood();
                }else {
                    snake[0].className = "cell";
                    snake.shift();
                    mapArr[y][x].className = "snake cell";
                    snake.push(mapArr[y][x]);
                }
            }

            //键盘事件
            document.onkeydown = function (evt) {
                var e = evt || window.event;
                if (flag == true){
                    flag = false;
                    timeout = setTimeout(function () {
                        flag = true;
                    },speed);
                }else {
                    return;
                }


                //按键方向和蛇正在移动的方向一样  使按键失效
                if (direction == "l" && e.keyCode == 39)return;
                if (direction == "u" && e.keyCode == 40)return;
                if (direction == "r" && e.keyCode == 37)return;
                if (direction == "d" && e.keyCode == 38)return;


                switch (e.keyCode){
                    case 37:
                        direction = 'l';
                        break;
                    case 38:
                        direction = 'u';
                        break;
                    case 39:
                        direction = 'r';
                        break;
                    case 40:
                        direction = 'd';
                        break;

                }



            };
            
            
            touch.on("body","swipeleft swiperight swipedown swipeup",function (evt) {
                var e = evt || window.event;
                if (flag == true){
                    flag = false;
                    timeout = setTimeout(function () {
                        flag = true;
                    },speed);
                }else {
                    return;
                }


                //按键方向和蛇正在移动的方向一样  使按键失效
                if (direction == "l" && e.type == "swiperight")return;
                if (direction == "u" && e.type == "swipedown")return;
                if (direction == "r" && e.type == "swipeleft")return;
                if (direction == "d" && e.type == "swipeup")return;


                switch (e.type){
                    case "swipeleft":
                        direction = 'l';
                        break;
                    case "swipeup":
                        direction = 'u';
                        break;
                    case "swiperight":
                        direction = 'r';
                        break;
                    case "swipedown":
                        direction = 'd';
                        break;

                }

            }) 




        }











    }();
</script>
</html>